﻿@model IEnumerable<Order>
@{Html.Telerik().Grid(Model)
    .Name("Grid")
    .ToolBar(toolBar => toolBar.Template(
    @<text>
    <label class="customer-label" for="Customers-input">
        Show orders for customer:
    </label>
    @(Html.Telerik().ComboBox()
                    .Name("Customers")
                    .DataBinding(binding => binding.Ajax().Select("_GetCustomers", "Grid"))
                    .AutoFill(true)
                    .Filterable(filtering =>
                    {
                        filtering.FilterMode(AutoCompleteFilterMode.StartsWith);
                    })
                    .HtmlAttributes(new { style = "width: 300px" })
                    .HighlightFirstMatch(true)
                    .ClientEvents(events => events.OnChange("customerChange"))
            )
    </text>))
    .Columns(columns =>
    {
        columns.Bound(o => o.OrderID).Width(100);
        columns.Bound(o => o.Customer.CompanyName);
        columns.Bound(o => o.ShipAddress);
        columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(100);
    })
    .ClientEvents(clientEvents => clientEvents.OnDataBinding("dataBinding"))
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_CustomToolBar", "Grid"))
    .Pageable()
    .Sortable()
    .Render();
}
<script type="text/javascript">
    function customerChange() {
        $("#Grid").data("tGrid").rebind();
    }

    function dataBinding(args) {
        var customerID = $("#Customers").data("tComboBox").value();
        args.data = $.extend(args.data, { customerID: customerID });
    }
</script>
@section HeadContent {
    <style type="text/css">
        .customer-label
        {
            vertical-align: middle;
            padding-right: .4em;
        }
        #Customers
        {
            vertical-align: middle;
        }
    </style>
}
